<template>
  <div id="app">
    <router-view/>
    <nav>
      <ul>
        <router-link to="/home" tag="li">
          <span>图</span>
          <em>首页</em>
        </router-link>
        <router-link to="/kind" tag="li">
          <span>图</span>
          <em>分类</em>
        </router-link>
        <router-link to="/cart" tag="li">
          <span>图</span>
          <em>购物车</em>
        </router-link>
        <router-link to="/my" tag="li">
          <span>图</span>
          <em>我的</em>
        </router-link>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
#app{
  display: flex;
  flex-direction: column;
  height: 100%;
  .box{
    flex: 1;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  nav{
    height: 0.8rem;
    width:100%;
    background: #efefef;
    ul{
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 100%;
        em{
          margin-top: 0.1rem;
          font-style: normal;
          font-size: 20px;
        }
      }
      .router-link-active{
        background: red;
        color: #fff;
      }
    }
  }
}

</style>
